<template>
  <div>
    <!-- 使用 $attrs 继承父组件传入的属性 -->
    <input v-bind="$attrs" :type="type" :value="value" @input="handleInput">
  </div>
</template>

<script>
export default {
  name: 'LgInput',
  // 禁用继承属性
  inheritAttrs: false,
  // 外部传入的数据
  props: {
    value: {
      type: String
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  methods: {
    // 参数为事件对象
    handleInput (evt) {
      // 触发该组件的input事件，将值返回给父组件的input事件
      this.$emit('input', evt.target.value)
      // 查找指定父组件函数  用于多层嵌套
      const findParent = parent => {
        while (parent) {
          if (parent.$options.name === 'LgFormItem') {
            break
          } else {
            parent = parent.$parent
          }
        }
        return parent
      }
      // 执行查找父组件LgFormItem
      const parent = findParent(this.$parent)
      // 若查找到则执行自定义事件 validate
      if (parent) {
        parent.$emit('validate')
      }
    }
  }
}
</script>

<style>

</style>
